@mixin hairline( $border: "all", $color:$BORDER_COLOR_HAIRLINE ) {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    
    // @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        width : 200%;
        height: 200%;
        transform: scale(0.5);
        transform-origin: left top;
    // }

    @if ( str-index($border, "left") ) {
        border-left: 1px solid $color;
    }
    
    @if ( str-index($border, "right") ) {
        border-right: 1px solid $color;
    }
    
    @if ( str-index($border, "top") ) {
        border-top: 1px solid $color;
    }
    
    @if ( str-index($border, "bottom") ) {
        border-bottom: 1px solid $color;
    }
    
    @if ( $border == "all" ) {
        border: 1px solid $color;
    }
    
    pointer-events: none;
    
    @include align("TL");
}

/// 定义对齐方式。
@mixin align( $direct: "TL" ) {
    position: absolute;
    
    @if ( $direct == "TL" ) {
        left: 0px;
        top : 0px;
    }
    
    @if ( $direct == "TR" ) {
        top  : 0px;
        right: 0px;
    }
    
    @if ( $direct == "BL" ) {
        left: 0px;
        bottom: 0px;
    }
    
    @if ( $direct == "BR" ) {
        right: 0px;
        bottom: 0px;
    }
}

/// 清除元素的边框。
@mixin clear-border($border ) {
    @if ( str-index($border, "left") ) {
        border-left-width: 0px;
    }
    
    @if ( str-index($border, "right") ) {
        border-right-width: 0px;
    }
    
    @if ( str-index($border, "top") ) {
        border-top-width: 0px;
    }
    
    @if ( str-index($border, "bottom") ) {
        border-bottom-width: 0px;
    }
    
    @if ( $border == "all" ) {
        border-width: 0px;
    }
}



/// 清除容器内元素的浮动。
@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

.cf,
.clearfix {
    @include clearfix();
}

/// 多行文本截断，并出现省略号(...)。
@mixin mutiline-overflow( $line: 2 ) {
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
}

/// 半透明的遮罩。
@mixin mask( $opacity: 0.4, $background: $COLOR_BLACK, $position: fixed ) {
    position: $position;
    left: 0px;
    top : 0px;
    box-sizing: border-box;
    width : 100%;
    height: 100%;
    opacity: $opacity;
    background: $background;
}